<template>
  <div class="app-container">

    <div class="search-container">
      <div class="search-title">
        查询条件
      </div>
      <div class="search-form">
        <div class="form-row">
          <div class="form-column">
            <span class="column-title">单位</span>
            <treeselect class="input-w150" v-model="queryParams.unitCode" :options="deptTreeList" :show-count="true"
              placeholder="请选择" />
          </div>
          <div class="form-column">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </div>
        </div>
      </div>
    </div>


    <div class="body-container">
      <div class="operation-bar">
        <div class="bar-title">
          待审核列表
        </div>
      </div>

      <el-table v-loading="loading" stripe :data="dataList">
        <el-table-column type="index" label="#" align="center" min-width="100"></el-table-column>
        <el-table-column label="单位" prop="unitCode" align="center" min-width="170">
          <div slot-scope="scope">
            {{ getDeptName(scope.row.unitCode) }}
          </div>
        </el-table-column>
        <el-table-column label="姓名" prop="personnelName" align="center" min-width="170" />
        <el-table-column label="性别" prop="gender" align="center" min-width="170" />
        <el-table-column label="年龄" prop="age" align="center" min-width="170" />
        <el-table-column label="状态" prop="approvalStatus" align="center" min-width="170">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.approvalStatus == 1">待审核</el-tag>
            <el-tag type="success" v-if="scope.row.approvalStatus == 2">通过</el-tag>
            <el-tag type="danger" v-if="scope.row.approvalStatus == 3">不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="120" class-name="small-padding fixed-width">
          <div class="table-option" slot-scope="scope" v-if="scope.row.roleId !== 1">
            <span v-if="scope.row.approvalStatus == 0 || scope.row.approvalStatus == 1"
              @click="handleApproveUser(scope.row)">审核</span>
            <span @click="handleDetail(scope.row)">详情</span>
          </div>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

    <el-dialog title="人员审核" :visible.sync="visible" width="600px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="审核状态" required prop="approvalStatus">
          <el-select class="input-w300" v-model="ruleForm.approvalStatus">
            <el-option label="审核通过" :value="2"></el-option>
            <el-option label="审核不通过" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见：" required prop="approvalIdea">
          <el-input type="textarea" v-model="ruleForm.approvalIdea" placeholder="请选择" clearable filterable
            class="input-w300">

          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmForm('ruleForm')">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </span>
    </el-dialog>
    <UserDetail :id="personnelId" :visible.sync="userDialog"></UserDetail>

  </div>
</template>

<script>
import { approvalUser } from "@/api/talent";
import { findUserList } from '@/api/skill'
import { getDeptName } from "@/utils/ruoyi";
import UserDetail from '@/components/userDetail.vue'
export default {
  components: {
    UserDetail
  },
  data() {
    return {
      personnelId: '',
      userDialog: false,
      rules: {
        approvalIdea: [
          { required: true, message: '请输入审核意见', trigger: 'blur' }
        ],
        approvalStatus: [
          { required: true, message: '请选择审核状态', trigger: 'blur' }
        ],
      },
      ruleForm: {
        approvalIdea: '',
        approvalStatus: '',
        id: '',
      },
      visible: false,
      dataList: [],
      loading: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    deptList() {
      return this.$store.state.user.deptList
    },
    deptTreeList () {
      return this.$store.state.user.deptTreeList
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getDeptName(id) {
      return getDeptName(this.deptList, id)
    },
    // 确定审核
    confirmForm(ruleForm) {
      this.$refs[ruleForm].validate(validate => {
        if (validate) {
          this.$confirm('确定当前操作吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            const res = await approvalUser(this.ruleForm)
            if (res.code === 200) {
              this.$message.success('审核成功')
              this.visible = false
              this.getList()
            } else {
              this.$message.error(res.message)
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消审核'
            });
          });
        } else {
          return false;
        }
      })
    },
    // 打开审核弹窗
    handleApproveUser(row) {
      console.log(row);
      this.ruleForm = {}
      this.ruleForm.id = row.id
      this.visible = true
    },
    // 详情
    handleDetail(row) {
      this.userDialog = true;
      this.personnelId = String(row.id)
    },
    // 查询
    async getList() {
      this.loading = true;
      let params = {
        ...this.queryParams,
        approvalStatusList: [1]
      }
      const res = await findUserList(params)
      this.loading = false;
      if (res.code === 200) {
        this.dataList = res.rows || [];
        this.total = res.total || 0;
      } else {
        this.dataList = [];
        this.total = 0;
      }
    },
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }
      this.handleQuery();
    }
  }
};
</script>
<style lang="scss" scoped>
.file-name {
  display: flex;
  align-items: center;
  justify-content: center;

  .img-icon {
    width: 20px;
    height: 20px;
  }

  span {
    margin-left: 8px;
  }
}
</style>